<template>
  <div class="app-container" v-loading="loading">
    <div class="top-btns">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-download"
        @click="exoprtExcel"
        >导出excel</el-button
      >
      <el-upload
        name="file"
        :show-file-list="false"
        style="display: inline-block; margin-left: 10px"
        :action="baseApi + apiName + '/imports'"
        :limit="1"
        :on-success="handleSuccess"
      >
        <el-button icon="el-icon-upload2" size="mini" type="primary"
          >导入excel</el-button
        >
      </el-upload>
    </div>
    <el-table
      :data="list"
      border
      stripe
      lazy
      :load="load"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="名称" prop="name" />
      <el-table-column label="编码" prop="dictCode" />
      <el-table-column label="值" prop="value" />
    </el-table>
  </div>
</template>

<script>
import commonApi from '@/api/common'
import getQueryListMix from '@/mixins/getQueryListMix'
export default {
  name: 'dictList',
  data() {
    return {
      baseApi: process.env.VUE_APP_BASE_API,
      apiName: '/admin/core/dict',
      queryListApi: commonApi.queryList,
      list: [],
      query: {
        parentId: 1,
      },
    }
  },
  mixins: [getQueryListMix],
  created() {
    this.getQueryList(this.apiName, this.query)
  },
  methods: {
    exoprtExcel() {
      window.location.href = this.baseApi + this.apiName + '/export'
    },
    handleSuccess(res, file) {
      console.log(res)
      if (res.code === 0) {
        this.$message.success('导入成功')
      } else {
        this.$message.error(res.message)
      }
    },
    async load(tree, treeNode, resolve) {
      this.query.parentId = tree.id
      let res = await commonApi.queryList(this.apiName, this.query)
      if(res.code === 0){
        resolve(res.data.list)
      }else{
        return this.$message.error(res.message)
      }
    }
  },
}
</script>

<style lang="scss" scoped>
</style>